<template>
  <view class="video-container">
    <video 
      id="myVideo"
      :src="videoUrl" 
      controls
      autoplay
      :fullscreen="isFullscreen"  
      @play="handleVideoPlay"     
      style="width: 100%; height: 100%"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '',
      title: '',
      isFullscreen: false,  // 全屏状态标记
      videoContext: null    // 视频上下文
    }
  },
  onLoad(options) {
    if (options.url) {
      this.videoUrl = decodeURIComponent(options.url)
    }
    if (options.title) {
      this.title = decodeURIComponent(options.title)
      uni.setNavigationBarTitle({ title: this.title })
    }
  },
  onReady() {
    // 初始化视频上下文（组件渲染完成后获取）
    this.videoContext = uni.createVideoContext('myVideo', this)
  },
  methods: {
    // 视频开始播放时触发全屏
    handleVideoPlay() {
      // 延迟 500ms 确保视频已加载，避免部分平台无法触发
      setTimeout(() => {
        this.videoContext.requestFullScreen({
          direction: 0  // 0: 正常竖屏全屏（手机默认），90: 横屏全屏
        })
        this.isFullscreen = true
      }, 500)
    }
  }
}
</script>

<style>
.video-container {
  width: 100vw;
  height: 100vh;  /* 改为占满整个屏幕高度（可选） */
}
</style>